import React, { useState } from 'react'
import request from '../../api/request'
import { Button, Grid, NavBar, Popup, Tag, Input, Card, Toast } from 'antd-mobile'
import styles from './index.module.css'
import { useLocation } from 'react-router-dom'
import { useNavigate, useParams } from 'react-router-dom'
import { useSelector, useDispatch } from 'react-redux'
import { Steps } from 'antd-mobile'
import { Collapse } from 'antd-mobile'

function Dateil() {
  let navtion = useNavigate()
  let avatar = 'https://img.shetu66.com/2024/02/21/170846812899456083.jpg'
  let lction = useLocation()

  console.log(lction);
  const { state } = useLocation()
  console.log(state);

  const { Step } = Steps

  const [visible1, setVisible1] = useState(false)
  // 评论内容
  const [value, setValue] = useState('')
  // 评论的列表
  let [inputlist, setInputelist] = useState([])
  // const userInfo = JSON.parse(localStorage.getItem('userInfo'))
  const sw = ['商务座', '一等座', '二等座']
  const price = [
    state.tick.firstTick,
    state.tick.secondTick,
    state.tick.vip,
  ]

  const orderlistll = (sw, price) => {
    navtion(`/order?sw=${sw}&price=${price}`, {
      state: state
    })
  }

  const bution = () => {
    if (value === '')
      return Toast.show('请输入内容')
    setInputelist([...inputlist, value])

    setValue('')
  }

  // 支付

  const zflist = async () => {
    const res = await request.get('/api/pay', {
      params: {
        title: '支付', id: '53000019910424358X', price: '123'
      }
    })
    console.log(res);
    location.href = res.data.data

  }

  
  return (
    <div className={styles.boxl}>
      {/* 导航栏 */}
      <NavBar onBack={() => navtion(-1)}>
        <p>北京→广州</p>
      </NavBar>
      <div className={styles.pllist}>
        <Grid columns={3} gap={8}>
          <Grid.Item>
            <div className={styles['grid-demo-item-block']}>{state.start}</div>
          </Grid.Item>
          <Grid.Item>
            <div className={styles['grid-demo-item-block']}>{state.end}</div>
          </Grid.Item>
          <Grid.Item>
            <div className={styles['grid-demo-item-block']}>{state.startTime}</div>
          </Grid.Item>

          <Grid.Item>
            <div className={styles['grid-demo-item-block']}>商务座<b>有票</b></div>
          </Grid.Item>
          <Grid.Item>
            <div className={styles['grid-demo-item-block']}>一等座<b>有票</b></div>
          </Grid.Item>
          <Grid.Item>
            <div className={styles['grid-demo-item-block']}>二等座<b>有票</b></div>
          </Grid.Item>
        </Grid>
        <div className={styles.jtz} onClick={() => { setVisible1(true) }}>
          经停站
        </div>
        <Popup
          visible={visible1}
          onMaskClick={() => {
            setVisible1(false)
          }}
          onClose={() => {
            setVisible1(false)
          }}

        >
          <Steps direction='vertical'>
            {/* <Step title='填写机构信息' status='finish'  description='完成时间：2020-12-01 12:30'/> */}
            <Step title='北京' status='finish' description='完成时间：2020-12-01 12:30' />
            <Step title='天津' status='finish' description='完成时间：2020-12-01 13:30' />
            <Step title='石家庄' status='finish' description='完成时间：2020-12-01 15:30' />
            <Step title='郑州' status='finish' description='完成时间：2020-12-01 17:30' />
            <Step title='武汉' status='finish' description='完成时间：2020-12-01 18:30' />
            <Step title='长沙' status='finish' description='完成时间：2020-12-01 20:30' />
            <Step title='深圳' status='finish' description='完成时间：2020-12-01 22:30' />
            <Step title='广州' status='finish' description='完成时间：2020-12-01 23:30' />
          </Steps>
        </Popup>

      </div>


      {/* 手风琴 */}
      <div>
        <Collapse arrowIcon={() => <Tag color='warning'>改签</Tag>}>
          {
            sw.map((item, index) => {
              return <Collapse.Panel key={index} title={
                <div><span>{item}</span>￥<span>{price[index]}</span></div>
              }
                onClick={() => orderlistll(price[index], item)}
              >

              </Collapse.Panel>

            })
          }


        </Collapse>
      </div>

      <Card title='卡片标题' >
        <div className={styles.inputlistt}>
          <Input
            placeholder='请输入内容'
            value={value}
            onChange={val => {
              setValue(val)
            }}
          />
          <Button size='mini' className={styles.tjlist} onClick={() => bution()}>提交</Button>
        </div>
        <div>
          {
            inputlist.length > 0 && inputlist.map((item, index) => {
              return <dl key={index} className={styles.pllist}>
                <dt><img className={styles.imgg} src='https://tse1-mm.cn.bing.net/th/id/OIP-C.Oyd6vI9PCWeVxg96xh5fTwHaLH?w=115&h=180&c=7&r=0&o=7&dpr=1.3&pid=1.7&rm=3' /></dt>
                <dd>:{item}</dd>
              </dl>


            })
          }
        </div>

      </Card>
      <Button onClick={() => zflist()}>支付</Button>
    </div>
  )
}

export default Dateil
